﻿<style type="text/css">
    body {
        margin-bottom: 60px !important;
    }

    a, button, input {
        -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
    }

    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .top_bar {
        position: fixed;
        z-index: 900;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        font-family: Helvetica, Tahoma, Arial, Microsoft YaHei, sans-serif;
    }

    .top_menu {
        display: -webkit-box;
        border-top: 1px solid #b3b3b3;
        display: block;
        width: 100%;
        background: rgba(255, 255, 255, 0.7);
        height: 48px;
        display: -webkit-box;
        display: box;
        margin: 0;
        padding: 0;
        -webkit-box-orient: horizontal;
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#b9b9b9));
    }

    .top_bar .top_menu > li {
        -webkit-box-flex: 1;
        background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
        -webkit-background-size: 1px 100%, 1px 100%;
        background-size: 1px 100%, 1px 100%;
        background-position: 1px center, 2px center;
        background-repeat: no-repeat;
        position: relative;
        text-align: center;
    }

    .top_menu > li:first-child {
        background: none;
    }

    .top_bar .top_menu > li > a {
        height: 48px;
        line-height: 48px;
        display: block;
        text-align: center;
        color: #4f4d4f;
        text-shadow: 0 1px rgba(255, 255, 255, 0.3);
        text-decoration: none;
        border-top: 1px solid #f9f9f9;
        -webkit-box-flex: 1;
    }

        .top_bar .top_menu > li > a label {
            overflow: hidden;
            margin: 0 0 0 0;
            font-size: 12px;
            display: block !important;
            line-height: 18px;
            text-align: center;
        }

        .top_bar .top_menu > li > a img {
            margin: 2px 0 0 0;
            height: 24px;
            width: 24px;
            color: #fff;
            line-height: 48px;
            vertical-align: middle;
        }

    .top_bar li:first-child a {
        display: block;
    }

    .menu_font {
        padding: 0;
        position: absolute;
        z-index: 500;
        bottom: 60px;
        right: 10px;
        width: 120px;
        background: #e4e3e2;
        border: 1px solid #afaeaf;
        border-radius: 5px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    }

        .menu_font.hidden {
            display: none;
        }

    .top_menu li:last-of-type a {
        background: none;
    }

    .top_menu > li:last-of-type > a label {
        padding: 0 0 0 3px;
    }

    .menu_font li:last-of-type {
        background: none;
    }

    .menu_font li a {
        text-align: left !important;
    }

    .top_menu li:last-of-type a {
        background: none;
    }

    .menu_font:before, .menu_font:after {
        content: "";
        display: inline-block;
        position: absolute;
        z-index: 240;
        bottom: 0;
        left: 85%;
        margin-left: -8px;
        margin-bottom: -16px;
        width: 0;
        height: 0;
        border: 8px solid red;
        border-color: #afaeaf transparent transparent transparent;
    }

    .menu_font:after {
        z-index: 501;
        border-color: #e4e3e2 transparent transparent transparent;
        margin-bottom: -15px;
        margin-left: -8px;
    }

    .menu_font li {
        background: -webkit-gradient(linear, 0 0, 100% 0, from(#e4e3e2), to(#e4e3e2), color-stop(50%, #f3f3f2)), -webkit-gradient(linear, 0 0, 100% 0, from(#e4e3e2), to(#e4e3e2), color-stop(50%, #c6c5c5));
        background-size: 100% 1px, 100% 2px;
        background-repeat: no-repeat;
        background-position: center bottom;
    }

        .menu_font li:first-of-type {
            border-top: 0;
        }

        .menu_font li:last-of-type {
            border-bottom: 0;
        }

        .menu_font li a {
            height: 40px;
            line-height: 40px !important;
            position: relative;
            color: #fff;
            display: block;
            width: 100%;
            text-indent: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            text-decoration: none;
            color: #4f4d4f;
            text-shadow: 0 1px rgba(255, 255, 255, 0.3);
        }

            .menu_font li a img {
                width: 20px;
                height: 20px;
                display: inline-block;
                margin-top: -2px;
                color: #fff;
                line-height: 40px;
                vertical-align: middle;
            }

    .menu_font > li > a label {
        padding: 3px 0 0 3px;
        font-size: 14px;
        overflow: hidden;
        margin: 0;
    }

    #menu_list1 {
        right: 0;
        left: 10px;
    }

        #menu_list1:before, #menu_list1:after {
            left: 15%;
        }

        #menu_list1:after {
            margin-bottom: -15px;
            margin-left: -8px;
        }

    #sharemcover {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        display: none;
        z-index: 20000;
    }

        #sharemcover img {
            position: fixed;
            right: 18px;
            top: 5px;
            width: 260px;
            height: 180px;
            z-index: 20001;
            border: 0;
        }

    .top_bar .top_menu > li > a:hover, .top_bar .top_menu > li > a:active {
        background-color: #CCCCCC;
    }

    .menu_font li a:hover, .menu_font li a:active {
        background-color: #CCCCCC;
    }

    .menu_font li:first-of-type a {
        border-radius: 5px 5px 0 0;
    }

    .menu_font li:last-of-type a {
        border-radius: 0 0 5px 5px;
    }

    #plug-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: 800;
    }

    #cate18 .device {
        bottom: 49px;
    }

    #cate18 #indicator {
        bottom: 240px;
    }

    #cate19 .device {
        bottom: 49px;
    }

    #cate19 #indicator {
        bottom: 330px;
    }

    #cate19 .pagination {
        bottom: 60px;
    }

    #cate60 .device {
        bottom: 55px;
    }

    #cate61 .device {
        bottom: 55px;
    }

    #cate74 .device {
        bottom: 55px;
    }

    #cate75 .device {
        bottom: 55px;
    }

    #cate63 #indicator {
        bottom: 80px;
    }
</style>

<div id="sharemcover" onclick="document.getElementById('sharemcover').style.display='';" style="display: none">
    <img src="/templatesstore/images/MgnnofmleM.png">
</div>
<div class="top_bar" style="-webkit-transform: translate3d(0,0,0)">
    <nav>
        <ul id="top_menu" class="top_menu">
            <vt:function var="bottom" method="getBottomMenu" type="$this" classlayer="1" />
            <vt:foreach from="$bottom" item="b" index="floor">

         <li>

          <vt:if var="b.link_url" value="" compare="==">
                   <a onclick="javascript:displayit({$floor})">
               <vt:else> 
                   <a  href="{$b.link_url}">
               </vt:if>
              <img src="{$b.ico_url}"><label>{$b.title}</label></a>

              <ul id="menu_list{$floor}" class="menu_font" style="display: none;">
                   <vt:function var="sonbottom" method="getBottomMenu" type="$this" classlayer="2" parentid="$b.id" />
                <vt:foreach from="$sonbottom" item="s" index="sfloor">

                    <li><a href="{$s.link_url}">
                        <img src="{$s.ico_url}"><label>{$s.title}</label></a></li>
                    </vt:foreach>
                   
                </ul>
            </li>

          </vt:foreach>

        </ul>
    </nav>
</div>

<div id="plug-wrap" onclick="closeall()" style="display: none;"></div>
<script>
    function displayit(n) {
        n -= 1;
        var count = document.getElementById("top_menu").getElementsByTagName("ul").length;
        for (i = 0; i < count; i++) {
            if (i == n) {
                if (document.getElementById("top_menu").getElementsByTagName("ul").item(n).style.display == 'none') {
                    document.getElementById("top_menu").getElementsByTagName("ul").item(n).style.display = '';
                    document.getElementById("plug-wrap").style.display = '';
                } else {
                    document.getElementById("top_menu").getElementsByTagName("ul").item(n).style.display = 'none';
                    document.getElementById("plug-wrap").style.display = 'none';
                }
            } else {
                document.getElementById("top_menu").getElementsByTagName("ul").item(i).style.display = 'none';
            }
        }
    }
    function closeall() {
        var count = document.getElementById("top_menu").getElementsByTagName("ul").length;
        for (i = 0; i < count; i++) {
            document.getElementById("top_menu").getElementsByTagName("ul").item(i).style.display = 'none';
        }
        document.getElementById("plug-wrap").style.display = 'none';
    }


    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        WeixinJSBridge.call('hideToolbar');
    });
</script>
